<%@ include file="../shared/standardDirectives.jspf" %>
<script>
	
	$(document).ready(function(){
		$("#ajaxSearch").click(function(){
			$.ajax({
				type: "GET",
				url: "/rest/search/route", // change to full path of file on server
				dataType: "text",
				data : {
					from : $('#from').val(),
					to : $('#to').val() 
				},
				success: function(data){
					alert(data);
				},
				cache: false,
				failure: function(data) {
					alert("XML File could not be found");
				}
			});
		});
		var fromArr = [];
		var toArr = [];
		function stop(label, id){
			this.label = label;
			this.id = id;
		}
		$.ajax({
			type: "GET",
			url: "/rest/search/stop", // change to full path of file on server
			dataType: "xml",
			data : {
				searchStr : $('#fromStr').val() 
			},
			success: function(xml){
				$(xml).find("stop").each(function(){
					fromArr.push(new stop($(this).attr("label"), $(this).attr("value")));
				});
			},
			complete: setupAC,
			cache: false,
			failure: function(data) {
				alert("XML File could not be found");
			}
		});
		$.ajax({
			type: "GET",
			url: "/rest/search/stop", // change to full path of file on server
			dataType: "xml",
			data : {
				searchStr : $('#toStr').val() 
			},
			success: function(xml){
				$(xml).find("stop").each(function(){
					toArr.push(new stop($(this).attr("label"), $(this).attr("value")));
				});
			},
			complete: setupAC,
			cache: false,
			failure: function(data) {
				alert("XML File could not be found");
			}
		});		
		function setupAC() {
			$("input#fromStr").autocomplete({
				source: fromArr,
				minLength: 1,
				select: function(event, ui) {
					$("#from").val(ui.item.id);
					$("input#fromStr").val(ui.item.label);
				}
			});
			$("input#toStr").autocomplete({
				source: toArr,
				minLength: 1,
				select: function(event, ui) {
					$("#to").val(ui.item.id);
					$("input#toStr").val(ui.item.label);
				}
			});
		}
	});       
</script>
<div class="demo" id="tabs-3">
	<html:form action="/route/search.do">
		<table>
			<thead>
				<tr>
					<th align="left">Plan Your Journey</th>
				</tr>
				<tr><th>&nbsp;</th></tr>
			</thead>
			<tbody>
				<tr>
					<th align="right">From:</th>
					<td>
						<html:hidden name="searchRouteForm" property="from" styleId="from"/>
						<html:text name="searchRouteForm" property="fromStr" styleId="fromStr" />
					</td>
					<td>
						<html:select property="originType" styleClass="input">
							<html:optionsCollection property="types" label="name" value="id" />
						</html:select>
					</td>
				</tr>
				<tr>
					<th align="right">To:</th>
					<td>
						<html:hidden name="searchRouteForm" property="to" styleId="to"/>
						<html:text name="searchRouteForm" property="toStr" styleId="toStr"/>
					</td>
					<td>
						<html:select property="destinationType" styleClass="input">
							<html:optionsCollection property="types" label="name" value="id" />
						</html:select>
					</td>
				</tr>
				<tr><td colspan="3"></td></tr>
				<tr>
					<td>&nbsp;</td>
					<td colspan="3">
						<table>
							<tr>
								<td width="40" align="center"><html:img src="../../images/icon-tube.gif"/></td>
								<td width="40" align="center"><html:img src="../../images/icon-buses.gif"/></td>
								<td width="40" align="center"><html:img src="../../images/icon-bike.gif"/></td>
								<td width="40" align="center"><html:img src="../../images/icon-walk.gif"/></td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td colspan="3">
						<table>
							<tr>
								<td width="40" align="center"><html:checkbox property="modes" value="0"></html:checkbox></td>
								<td width="40" align="center"><html:checkbox property="modes" value="1" disabled="true"></html:checkbox></td>
								<td width="40" align="center"><html:checkbox property="modes" value="2" disabled="true"></html:checkbox></td>
								<td width="40" align="center"><html:checkbox property="modes" value="3" disabled="true"></html:checkbox></td>
							</tr>
						</table>
					</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="2">&nbsp;</td>
					<td align="right">
						<table>
							<tr align="right">
								<td colspan="1" align="right"> <html:submit>Search</html:submit></td>
							</tr>
						</table>
					</td>
					<td align="right">
						<table>
							<tr align="right">
								<td colspan="1" align="right"><button id="ajaxSearch">AJAX SEARCH</button> </td>
							</tr>
						</table>
					</td>
				</tr>
			</tfoot>
		</table>
	</html:form>
	<table border="1">
		<tbody>
			<c:if test="${! empty searchRouteForm}">
				<c:forEach var="path" items="${searchRouteForm.path}" varStatus="status">
					<tr>
						<td><c:out value="${path.name}"></c:out> </td>
					</tr>
				</c:forEach>
			</c:if>
		</tbody>
	</table>
	<div id="result">
	</div>
</div>